<template>
  <el-card>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
            <el-radio-button value="TODO" @click="getTaskList(true)"
              >待办事项</el-radio-button
            >
            <el-radio-button value="DOWN" @click="getTaskList(false)"
              >已办事项</el-radio-button
            >
          </el-radio-group>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button
            v-if="tabPosition === 'DOWN'"
            type="text"
            @click="showProjectSelectDialog()"
            >更多>></el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      header-align="center"
      height="300"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :data="taskTableList"
      :loading="taskTableLoading"
      size="mini"
    >
      <vxe-column type="seq" width="60" title="序号" align="center" />
      <vxe-column
        v-for="column in taskTableCloumns"
        :key="column.field"
        :field="column.field"
        :title="column.title"
        :min-width="column.width"
        :align="column.align"
        show-overflow
      >
        <template v-slot:default="{ row }">
          {{ row[column.field] }}
        </template>
      </vxe-column>
      <vxe-column title="操作" min-width="80" align="center" fixed="right">
        <template v-slot:default="{ row }">
          <vxe-button
            v-if="tabPosition === 'TODO'"
            type="text"
            size="small"
            @click="
              toDetail(
                { id: row.bizId, title: row.bizName, type: row.bizType },
                'examine'
              )
            "
          >
            审批
          </vxe-button>
          <vxe-button
            v-if="tabPosition === 'DOWN'"
            type="text"
            size="small"
            @click="gotoViewDetail(row)"
          >
            查看
          </vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
    <div class="dialogs">
      <examineTotleListDialog
        :visible="examineTotleListDialogVisible"
        @close="closeProjectSelectDialog"
      />
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDetail } from "./utils/hooks";
import { ElMessage } from "element-plus";
import examineTotleListDialog from "./dialog/examineTotleListDialog.vue";
import { getAuditTaskList } from "@/api/ERP_public";

// 路由跳转
const { toDetail } = useDetail();
// 默认选中
const tabPosition = ref("TODO");
// 待办事项数据
let taskTableList = ref([]);
let taskTableLoading = ref(false);
let taskTableCloumns = ref([
  {
    field: "bizTypeName",
    title: "待办类型",
    width: 100,
    align: "center"
  },
  {
    field: "bizName",
    title: "标题",
    width: 100,
    align: "center"
  },
  {
    field: "createdUserName",
    title: "发起人",
    width: 100,
    align: "center"
  },
  {
    field: "createdAt",
    title: "审批发起时间",
    width: 100,
    align: "center"
  },
  {
    field: "taskAt",
    title: "任务到达时间",
    width: 100,
    align: "center"
  }
]);
// 所有已办事项弹窗
let examineTotleListDialogVisible = ref(false);
function showProjectSelectDialog() {
  examineTotleListDialogVisible.value = true;
}
function closeProjectSelectDialog(val: boolean) {
  examineTotleListDialogVisible.value = val;
}
// 获取事项列表
async function getTaskList(isBacklog: boolean) {
  taskTableLoading.value = true;
  let params: ApiParams = {};
  params.pageIndex = 1;
  params.pageSize = 10;
  params.isBacklog = isBacklog;
  try {
    const response: ApiResponse = await getAuditTaskList(params);
    taskTableList.value = response.data.records;
  } catch (error) {
    ElMessage.error("获取表格数据失败");
  } finally {
    taskTableLoading.value = false;
  }
}
// 根据代办类型跳转详情页
function gotoViewDetail(row: any) {
  switch (row.bizTypeName) {
    case "销售合同":
      toDetail({ id: row.bizId, title: row.bizName }, "salecontract");
      break;
    case "采购合同":
      toDetail({ id: row.bizId, title: row.bizName }, "purchasecontract");
      break;
    case "项目订单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "purchaseapply"
      );
      break;
    case "项目对账单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "reconciliation"
      );
      break;
    case "项目结算单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "reconciliationSettlement"
      );
      break;
    case "供应商对账单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "spreconciliation"
      );
      break;
    case "供应商结算单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "spreconciliationSettlement"
      );
      break;
    case "收款管理":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "receive"
      );
      break;
    case "付款管理":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "payment"
      );
      break;
    case "电梯订单":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "ElevatorOrder"
      );
      break;
    case "采购合同预付款":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "PurchaseContractAdvancePayment"
      );
      break;
    case "销售合同预收款":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "SalesContractAdvancePayment"
      );
      break;
    case "项目订单预收款":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "ProjectOrderAdvancePayment"
      );
      break;
    case "供货订单预付款":
      toDetail(
        { id: row.bizId, title: row.bizName, action: "view" },
        "SupplyOrderAdvancePayment"
      );
      break;
    default:
      ElMessage.error(
        "详情页面： " + row.bizTypeName + " 正在开发中，请联系管理员"
      );
  }
}
// 初始化
onMounted(async () => {
  await getTaskList(true);
});
</script>

<style lang="scss" scoped></style>
